<template>
  <KView class="sys-checkbox" @click="checkClick">
    <KView class="sys-checkbox-content" :style="{height:itemSize}">
      <KView class="sys-checkbox-icon" :style="{width:itemSize}">
        <KView :class="{'checked':value}">
          <sys-svg v-if="value" name="check" color="#ffffff"></sys-svg>
        </KView>
      </KView>
      <KView v-if="hasSlot" class="sys-checkbox-text">
        <slot></slot>
      </KView>
    </KView>
  </KView>
</template>

<script>
  import SystemUtil from 'utils/systemUtil';

  import SysSvg from 'common/sysSvg';

  export default {
    props: {
      value: {
        type: Boolean,
        required: true
      },
      size: {
        type: Number,
        default: 40
      },
      disabled: {
        type: Boolean,
        default: false
      },
      hasChange:{
        type: Boolean,
        default: true
      }
    },

    computed: {
      itemSize() {
        let size = this.size;
        return SystemUtil.formatPx(size);
      },
      hasSlot() {
        return this.$slots.default;
      }
    },

    data() {
      return {};
    },

    methods: {
      checkClick() {
        if (!this.hasChange) {
          this.$emit('click');
          return;
        }

        if (this.disabled) {
          return;
        }

        let checked = this.value;
        checked = !checked;
        this.$emit('input', checked);
        this.$emit('change', checked);
      }
    },
    components: {
      SysSvg
    }
  };

</script>

<style lang="scss">
  .sys-checkbox {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;

    .sys-checkbox-content {
      display: flex;
      flex-wrap: nowrap;

      .sys-checkbox-icon {
        >div {
          height: calc(100% - 2px);
          border: 1px solid #D4D4D4;
          border-radius: 50%;

          &.checked {
            height: calc(100% - #{formatPx(20)});
            border: none;
            background: #59C264;
            fill: #ffffff;
            padding: formatPx(10);
          }
        }
      }

      .sys-checkbox-text {
        flex: 1;
        margin-left: formatPx(10);
      }
    }
  }

</style>
